<template>
  <view :style="themeColor()">
    <view
      class="overflow-hidden bg-[var(--page-bg-color)] min-h-[100vh] px-[var(--sidebar-m)]"
      v-show="!loading"
    >
      <view
        class="h-[200rpx] box-border pt-[46rpx] pl-[40rpx] mt-[20rpx] rounded-angle"
        :style="{
          backgroundImage:
            'url(' + img('static/resource/images/member/point/mask_group.png') + ') ',
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat',
        }"
      >
        <view class="leading-[36rpx] text-[#ffffff] text-[26rpx]">当前余额(元)</view>
        <view class="text-[#fff] ml-[4rpx] text-[56rpx] mt-[16rpx] price-font">{{
          info ? moneyFormat(info.balance) : "0.00"
        }}</view>
      </view>

      <view class="top-mar card-template">
        <view
          class="flex items-center border-0 border-b-[2rpx] border-solid border-[var(--temp-bg)] pb-[10rpx] pl-[4rpx]"
        >
          <view
            class="text-[#333] text-[28rpx] iconfont iconrenminbiV6xx price-font"
          ></view>
          <view class="pl-[20rpx] flex items-center flex-1">
            <input
              type="digit"
              class="font-500 text-[54rpx] h-[70rpx] leading-[70rpx] bg-[#fff] price-font"
              v-model="rechargeAmount"
              maxlength="8"
              :placeholder="
                rechargeAmount
                  ? ''
                  : t('minWithdrawal') +
                    moneyFormat(
                      rechargeConfigObj.min_price ? rechargeConfigObj.min_price : '0.00'
                    ) +
                    '元'
              "
              placeholder-class="apply-price price-font"
              @input="onInputRecharge"
              @blur="onInputBlur"
              :adjust-position="false"
            />
            <text
              @click="clearMoney"
              v-if="rechargeAmount"
              class="nc-iconfont nc-icon-cuohaoV6xx1 !text-[32rpx] text-[var(--text-color-light9)]"
            ></text>
          </view>
        </view>
        <view class="flex justify-between item-center mt-[20rpx] px-[10rpx]">
          <view>
            <text class="text-[24rpx] text-[#888888]">选择充值金额</text>
          </view>
          <view @click="redirect({ url: '/addon/recharge/pages/recharge_record' })">
            <text class="text-[24rpx] text-primary"> {{ t("rechargeRecord") }}</text>
          </view>
        </view>
        <view class="category-container px-[10rpx] mt-[20rpx]">
          <view
            v-for="(item, index) in rechargePackage"
            :key="index"
            :class="[
              'category-item overflow-hidden flex justify-center items-center w-[190rpx] h-[110rpx] box-border border-[1rpx] text-center rounded-[var(--goods-rounded-big)] border-[#ccc] border-solid',
              { 'border-none text-white': activeIndex === index },
            ]"
            :style="{
              background:
                activeIndex === index
                  ? 'linear-gradient( 283deg, var(--primary-color) 11%, var(--primary-color) 100%), #FFFFFF'
                  : '',
            }"
            @click="selectCategory(item, index)"
          >
            <view class="flex flex-col justify-around item-center h-[80rpx]">
              <view class="flex justify-center items-end">
                <text class="text-[36rpx] font-500 leading-[1] price-font">{{
                  item.face_value
                }}</text>
                <text class="text-[25rpx] ml-[6rpx] font-500 leading-[30rpx]">{{
                  t("yuan")
                }}</text>
              </view>
              <view
                class="flex justify-center items-center"
                :style="{ color: activeIndex === index ? ' #FFFFFF' : '#888888' }"
                v-if="item.face_value != item.buy_price"
              >
                <text class="text-[22rpx] font-500 price-font mr-[10rpx]">售价</text>
                <text class="text-[22rpx] font-500 price-font">{{ item.buy_price }}</text>
                <text class="text-[22rpx] ml-[6rpx] font-500">{{ t("yuan") }}</text>
              </view>
            </view>
          </view>
        </view>
        <view
          class="mt-[20rpx]"
          v-if="Object.keys(activeContent).length > 0"
          @click="rechargeShowRef = true"
        >
          <text class="text-[22rpx] text-[var(--primary-color)]"
            >注：实际到账 {{ activeContent.face_value }}元</text
          >
          <text
            v-if="
              activeContent.point ||
              activeContent.growth ||
              activeContent.gift_content.length > 0
            "
            class="text-[22rpx] text-[var(--primary-color)]"
            >，赠送：</text
          >
          <text
            v-if="activeContent.point"
            class="text-[22rpx] text-[var(--primary-color)]"
            >{{ activeContent.point }}积分</text
          >
          <text
            v-if="activeContent.point && activeContent.growth"
            class="text-[22rpx] text-[var(--primary-color)]"
            >，</text
          >
          <text
            v-if="activeContent.growth"
            class="text-[22rpx] text-[var(--primary-color)]"
            >{{ activeContent.growth }}成长值</text
          >
          <text
            v-if="activeContent.gift_content.length > 0 && activeContent.growth"
            class="text-[22rpx] text-[var(--primary-color)]"
            >，</text
          >
          <template
            v-if="activeContent.gift_content.length > 0"
            v-for="(item, index) in activeContent.gift_content"
          >
            <text class="text-[22rpx] text-[var(--primary-color)]">{{ item.info }}</text>
            <text
              v-if="index + 1 < activeContent.gift_content.length"
              class="text-[22rpx] text-[var(--primary-color)]"
              >，</text
            >
          </template>
        </view>
      </view>

      <view class="top-mar card-template" v-if="rechargeConfigObj.recharge_explain">
        <view>
          <text class="font-bold text-[33rpx]"> {{ t("rechargeInstructions") }}</text>
        </view>
        <view class="flex flex-col justify-between">
          <view>
            <text class="text-[26rpx] text-[#9f9f9f]">{{
              rechargeConfigObj.recharge_explain
            }}</text>
          </view>
        </view>
      </view>
      <view class="tab-bar-placeholder"></view>
      <view class="fixed bottom-[0] tab-bar left-0 right-0 px-[var(--sidebar-m)]">
        <button
          class="primary-btn-bg h-[80rpx] leading-[80rpx] text-[#fff] text-[26rpx] border-[0] font-500 rounded-[50rpx]"
          hover-class="none"
          :style="{ background: disabled ? '#ccc' : '', color: disabled ? '#fff' : '' }"
          :disabled="disabled"
          :loading="rechargeLoading"
          @click="recharge"
        >
          {{ t("confirm") }}
        </button>
      </view>
      <pay ref="payRef" @close="rechargeLoading = false" @confirm="rechargeSuccess"></pay>
    </view>
    <view @touchmove.prevent.stop>
      <u-popup
        :show="rechargeShowRef"
        @close="closeFn"
        mode="bottom"
        round="var(--rounded-big)"
      >
        <view class="min-h-[480rpx] px-[32rpx] popup-common center">
          <view class="mt-[20rpx]" v-if="Object.keys(activeContent).length > 0">
            <view class="title center !pb-[30rpx]">套餐详情</view>
            <scroll-view class="h-[450rpx]" scroll-y="true">
              <view>
                <view class="flex items-center mt-[24rpx]">
                  <view class="w-[120rpx] flex justify-end">
                    <view
                      class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[10rpx]"
                      >面值</view
                    >
                  </view>
                  <text class="text-[24rpx]">{{ activeContent.face_value }}元</text>
                </view>
                <view class="flex items-center mt-[24rpx]">
                  <view class="w-[120rpx] flex justify-end">
                    <view
                      class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[10rpx]"
                      >售价</view
                    >
                  </view>
                  <text class="text-[24rpx]">{{ activeContent.buy_price }}元</text>
                </view>
                <view class="flex items-center mt-[24rpx]" v-if="activeContent.point">
                  <view class="w-[120rpx] flex justify-end">
                    <view
                      class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[10rpx]"
                      >积分</view
                    >
                  </view>
                  <text class="text-[24rpx]">送{{ activeContent.point }}积分</text>
                </view>
                <view class="flex items-center mt-[24rpx]" v-if="activeContent.growth">
                  <view class="w-[120rpx] flex justify-end">
                    <view
                      class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[10rpx]"
                      >成长值</view
                    >
                  </view>
                  <text class="text-[24rpx]">送{{ activeContent.growth }}成长值</text>
                </view>
                <template v-if="activeContent.gift_content.length > 0">
                  <view
                    class="flex items-baseline mt-[24rpx]"
                    v-for="(item, index) in activeContent.gift_content"
                    :key="index"
                  >
                    <view class="w-[120rpx] flex justify-end">
                      <view
                        class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx] text-[22rpx] flex items-center justify-center px-[12rpx] h-[38rpx] mr-[10rpx]"
                        >{{ item.label }}</view
                      >
                    </view>
                    <view>
                      <view
                        class="flex mb-[10rpx] items-center text-[24rpx] leading-[1.3]"
                        v-for="(childItem, childIndex) in item.detail"
                        :key="childIndex"
                        >{{ childItem }}</view
                      >
                    </view>
                  </view>
                </template>
              </view>
            </scroll-view>
          </view>
        </view>

        <view class="p-[20rpx]">
          <button
            class="primary-btn-bg h-[80rpx] leading-[80rpx] text-[#fff] text-[26rpx] border-[0] font-500 rounded-[50rpx]"
            @click="rechargeShowRef = false"
          >
            确定
          </button>
        </view>
      </u-popup>
    </view>
    <loading-page :loading="loading"></loading-page>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import { t } from "@/locale";
import { redirect, img, debounce, moneyFormat } from "@/utils/common";
import { createRecharge, getRechargePackageList } from "@/addon/recharge/api/recharge";
import { rechargeConfig } from "@/app/api/member";
import { useSubscribeMessage } from "@/hooks/useSubscribeMessage";
import useMemberStore from "@/stores/member";
import { onLoad } from "@dcloudio/uni-app";

const rechargeShowRef = ref<any>(null);
const rechargePackage = ref<any[]>([]);
const rechargeAmount = ref<any>("");
const rechargeLoading = ref<boolean>(false);
const payRef = ref<any>(null);
const loading = ref(false);
// 当前选中的分类的索引
const activeIndex = ref();
const activeContent = ref<any>({});
// 账户金额
const memberStore = useMemberStore();
const info = computed(() => memberStore.info);
const rechargeConfigObj: any = reactive({});
const recharge_id = ref();
const selectCategory = (item: any, index: any) => {
  activeIndex.value = index;
  rechargeAmount.value = item.buy_price;
  recharge_id.value = item.recharge_id;
  activeContent.value = item;
};
const disabled = computed(() => {
  if (Object.keys(activeContent.value).length > 0) {
    return;
  } else {
    return (
      !rechargeAmount.value ||
      Number(rechargeAmount.value) < Number(rechargeConfigObj.min_price)
    );
  }
});

const onInputRecharge = () => {
  recharge_id.value = null;
  activeIndex.value = null;
  activeContent.value = {};
};
const onInputBlur = () => {
  setTimeout(() => {
    if (rechargeAmount.value && Object.keys(activeContent.value).length <= 0) {
      if (Number(rechargeAmount.value) < Number(rechargeConfigObj.min_price)) {
        uni.showToast({
          title: t("rechargeAmountError") + rechargeConfigObj.min_price + "元",
          icon: "none",
        });
      }
      // 校验金额格式
      if (!uni.$u.test.amount(rechargeAmount.value)) {
        rechargeAmount.value = parseFloat(rechargeAmount.value).toFixed(2);
      }
    }
  }, 100);
};

onLoad(async (data) => {
  // 提现配置
  await rechargeConfig().then((res: any) => {
    for (let key in res.data) {
      rechargeConfigObj[key] = res.data[key];
    }
  });

  await getRechargePackageList().then((res: any) => {
    rechargePackage.value = res.data;
  });
});

// 清空充值金额
const clearMoney = () => {
  rechargeAmount.value = "";
  recharge_id.value = null;
  activeIndex.value = null;
  activeContent.value = {};
};

const closeFn = () => {
  rechargeShowRef.value = false;
};

/**
 * 发起充值
 */
const recharge = debounce(() => {
  if (uni.$u.test.isEmpty(rechargeAmount.value)) {
    uni.showToast({ title: t("customRechargeAmount"), icon: "none" });
    return;
  }
  if (!uni.$u.test.amount(rechargeAmount.value)) {
    uni.showToast({ title: t("rechargeAmountError"), icon: "none" });
    return;
  }
  if (rechargeLoading.value) return;
  rechargeLoading.value = true;
  let data = {
    recharge_money: rechargeAmount.value,
    recharge_id: recharge_id.value ? recharge_id.value : "",
  };
  createRecharge(data)
    .then((res: any) => {
      useSubscribeMessage().request("recharge_success");
      payRef.value?.open({
        tradeType: res.data.trade_type,
        tradeId: res.data.trade_id,
        payReturn: `/app/pages/member/index`,
      });
    })
    .finally(() => {
      rechargeLoading.value = false;
      loading.value = false;
    });
});

// 充值成功后更新个人数据
const rechargeSuccess = () => {
  memberStore.getMemberInfo();
};
</script>

<style lang="scss" scoped>
:deep(.apply-price) {
  color: var(--text-color-light9);
  font-size: 26rpx;
  font-weight: normal;
  line-height: 76rpx;
}

.tab-bar-placeholder {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 166rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 166rpx);
}

.tab-bar {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
}

.category-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 30rpx;
}

.category-item {
  flex: 0 0 calc(33.2% - 20rpx);
}
</style>
